<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        @font-face{font-family:'ZoomlaWenzhengming-A064'; /*逐浪文征明吴门狂草书*/
    src: url('https://code.z01.com/font/ZoomlaWenzhengming-A064.eot?#iefix'); /* IE9 */
    src: url('https://code.z01.com/font/ZoomlaWenzhengming-A064.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */
    url('https://code.z01.com/font/ZoomlaWenzhengming-A064.woff') format("woff"), /* chrome、firefox */
    url('https://code.z01.com/font/ZoomlaWenzhengming-A064.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url('https://code.z01.com/font/ZoomlaWenzhengming-A064.svg#ZoomlaWenzhengming-A064') format("svg"); /* iOS 4.1- */
    font-style: normal; font-weight: normal;}
        .parent{
            color:pink;
            /* 行高 */
            line-height: 36px;
            font-size: 20px;
            /* 设置文字水平对齐 left right center */
            text-align: center;
            /* 取消下划线 */
            text-decoration: none;
        }
        a{
            text-decoration: none;
        }
    p{
        color:red !important;
    }
    .p{
        color: blue;
    }
    #pid{
        color: aqua;
    }
    section{
        /* 1.关键字 red green blue */
        /* color:red */
        /* 2.十六进制 #0-9 a-f 3 4 6 */
        color: red;
/* 3.rgb 三原色 red green blue 0-255 */
/* 4.rgba 三原色加透明度 alpha 0((完全透明)-1(完全不透明) 值越小越透明，值越大颜色越深*/
/* color:rgba(red, green, blue, alpha); */
/* 设置字体大小 */
font-size: 28px;
/* 设置字体类型 */
font-family: "楷体","微软雅黑","草书",serif,cursive;
/* 设置字体粗细程度 bold-700 bolder 900 */
font-weight: bold;
/* 设置字体是否开启斜体 */
font-style: italic;
font-family:'ZoomlaWenzhengming-A064';
    }
    
    </style>
    
</head>
<body>
    <!-- 1.继承性 设置给父元素样式 后代元素可以继承
     color font- text- line-
      -->
     <div class="parent">
        <div>我是div</div>
        <div>我是div</div>
        <div>我是div</div>
        <a href="">百度一下</a>
     <h1>一级标题</h1>
     </div>
     <!--2.层叠性 使用多个不同的选择器给同一个标签设置相同的样式 发生层叠  -->
     <p id="pid" class="p">段落标签</p>
     <!-- 3.优先级 
      内联样式>内部样式/外部样式表
      ！important 不计入权重计算 优先级最高
      style  1000
      id   100
      class  10
      标签  1、
      通配符 * 0
       -->
      <p id="pid" style="color:orange" class="p">段落标签</p>
      <section>我是section</section>
</body>
</html>